<template>
  <div>
    <div class="indexKfBottom" v-if="name != '财务部门' || name != '运维部门'">
      <el-row>
        <el-col :span="12">
          <p>快捷入口</p>
          <el-row>
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch(1)">查询订单</div></el-col
            >
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch(2)">查询车站</div></el-col
            >
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch(3)">提交日报</div></el-col
            >
          </el-row>
        </el-col>
        <el-col :span="12"
          ><div class="indexkfRight">
            <h3>代办事项</h3>
            <div>待处理投诉 <span style="color: #d9001b">5个</span></div>
          </div></el-col
        >
      </el-row>
    </div>

    <div class="indexKfBottom" v-if="name == '财务部门'">
      <el-row>
        <el-col :span="12">
          <h3>快捷入口</h3>
          <el-row>
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch2(1)">
                财务报表
              </div></el-col
            >
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch2(2)">
                入账查询
              </div></el-col
            >
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch2(3)">
                出账查询
              </div></el-col
            >
          </el-row>
        </el-col>
        <el-col :span="12"
          ><div class="indexkfRight">
            <h3>代办事项</h3>
            <div>
              <p>
                等待审核 <span style="color: #d9001b">{{ caiwuDaiNum }}个</span>
              </p>
              <p>
                核账异常 <span style="color: #d9001b">{{ caiwuErrNum }}个</span>
              </p>
            </div>
          </div></el-col
        >
      </el-row>
    </div>

    <div class="indexKfBottom" v-if="name == '运维部门'">
      <el-row>
        <el-col :span="12">
          <h3>快捷入口</h3>
          <el-row>
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch3(1)">
                车站列表
              </div></el-col
            >
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch3(2)">
                车次列表
              </div></el-col
            >
            <el-col :span="8"
              ><div class="indexkfItem" @click="serch3(3)">
                自助机列表
              </div></el-col
            >
          </el-row>
        </el-col>
        <el-col :span="12"
          ><div class="indexkfRightYun">
            <h3>代办事项</h3>
            <div>
              <div class="yunDiv">
                <p>
                  <span>自助机错误 </span>
                  <span style="color: #d9001b">{{ YunData.atmErr }}个</span>
                </p>
                <p style="margin-left: 150px">
                  <span>断网车站 </span>
                  <span style="color: #d9001b">{{ YunData.DuanWang }}个</span>
                </p>
              </div>
              <div class="yunDiv">
                <p>
                  <span>未撤销订单 </span>
                  <span style="color: #d9001b">{{ YunData.orderNum }}个</span>
                </p>
              </div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    name(a, b) {
      this.name = a;
    },
    caiwuErrNum(a, b) {
      this.caiwuErrNum = a;
    },
    caiwuDaiNum(a, b) {
      this.caiwuDaiNum = a;
    },
    YunData(a, b) {
      this.YunData = a;
    },
  },
  props: ["name", "caiwuErrNum", "caiwuDaiNum", "YunData"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    serch(i) {
      switch (i) {
        case 1:
          this.$router.push({
            path: "service/orderList",
          });
          break;
        case 2:
          this.$router.push({
            path: "station/stationList",
          });
          break;
        case 3:
          this.$router.push({
            path: "service/daily",
          });
          break;
        default:
          break;
      }
    },

    serch2(i) {
      switch (i) {
        case 1:
          this.$router.push({
            path: "finance/report",
          });
          break;
        case 2:
          this.$router.push({
            path: "finance/credit",
          });
          break;
        case 3:
          this.$router.push({
            path: "finance/payout",
          });
          break;
        default:
          break;
      }
    },

    serch3(i) {
      switch (i) {
        case 1:
          this.$router.push({
            path: "station/stationList",
          });
          break;
        case 2:
          this.$router.push({
            path: "station/trainNumberList",
          });
          break;
        case 3:
          this.$router.push({
            path: "station/selfService",
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.imgDiv {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: 13px;
}
.divImg {
  width: 100%;
  height: 100%;
}
.headerDiv {
  border: 1px solid rgba(233, 233, 233, 1);
  padding-left: 10%;
  padding-top: 20px;
  width: 95%;
  height: 155px;
  margin: 0 auto;
}
.headerDiv p {
  margin: 0;
  padding: 0;
}
.moneytitle,
.statusMessage {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.427450980392157);
}

.status {
  color: rgba(0, 0, 0, 0.647058823529412);
}
.moneyStyle {
  font-size: 1.9rem;
}
.indexKfBottom {
  width: 95%;
  margin: 0 auto;
  margin-top: 20px;
}
.indexkfItem {
  border: 1px solid rgba(233, 233, 233, 1);
  width: 91%;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.indexkfRight {
  border: 1px solid rgba(233, 233, 233, 1);
  width: 98%;
  margin: 0 auto;
  height: 300px;
}
.indexkfRightYun {
  border: 1px solid rgba(233, 233, 233, 1);
  height: 300px;
}
.indexkfRightYun h3,
.indexkfRight h3 {
  padding-left: 25px;
  padding-top: 20px;
  line-height: 40px;
}
.indexkfRight p {
  margin-top: 40px;
}
.indexkfRight div {
  width: 80%;
  margin: 0 auto;
}
.yunDiv {
  margin-left: 80px;
  line-height: 40px;
}
.yunDiv p {
  display: inline-block;
}
</style>